<template>
    <div class="page-wrapper">
        <div class="i-layout-page-header">
            <PageHeader title="天域人力管理系统" hidden-breadcrumb />
        </div>
        <!-- 考务人员页面头部 -->
        <div class="examination_personnel-header">
            <!-- <input class="header-ipt" type="text" placeholder="按考生身份证/姓名/手机号搜索">
            <button class="header-btn">搜索</button> -->
            <!-- <Form ref="form" :model="data" :label-width="110" label-position="right">
                <Row :gutter="24" type="flex" justify="start">
                    <Col v-bind="grid">
                        <FormItem label="请假单编号：" prop="code" label-for="code">
                            <Input v-model="data.code" placeholder="请输入" element-id="code" />
                        </FormItem>
                    </Col>
                    <Col v-bind="grid">
                        <FormItem label="姓名：" prop="name" label-for="name">
                            <Input v-model="data.name" placeholder="请输入" element-id="name" />
                        </FormItem>
                    </Col>
                    <template v-if="collapse">
                        <Col v-bind="grid">
                            <FormItem label="请假类别：" prop="type" label-for="type">
                                <Select v-width="'100%'" v-model="data.type" placeholder="请选择" element-id="type">
                                    <Option :value="1">事假</Option>
                                    <Option :value="2">病假</Option>
                                    <Option :value="3">病假（工伤）</Option>
                                    <Option :value="4">产假</Option>
                                    <Option :value="5">陪产假</Option>
                                    <Option :value="6">婚假</Option>
                                    <Option :value="7">丧假</Option>
                                    <Option :value="8">节育假</Option>
                                    <Option :value="9">其他假期</Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col v-bind="grid">
                            <FormItem label="请假时间：" prop="startTimeSt" label-for="startTimeSt">
                                <DatePicker v-width="'100%'" type="daterange" v-model="data.startTimeSt" element-id="startTimeSt" />
                            </FormItem>
                        </Col>                    </template>
                    <Col v-bind="grid" class="ivu-text-right">
                        <FormItem>
                            <Button type="primary" @click="searchDableData">搜索</Button>
                            <Button class="ivu-ml-8" @click="emptyData">清空条件</Button>
                            <a v-font="14" class="ivu-ml-8" @click="collapse = !collapse">
                                <template v-if="!collapse">
                                    展开 <Icon type="ios-arrow-down" />
                                </template>
                                <template v-else>
                                    收起 <Icon type="ios-arrow-up" />
                                </template>
                            </a>
                        </FormItem>
                    </Col>
                </Row>
            </Form> -->
            <btn-search :dataList="dataLists" :searchType="['name','ID_card','phone_number']" @searchData="btnSearch"></btn-search>
        </div>
        <!-- 考务人员页面列表 -->
        <data-list :dataList="dataListActive"  pageType="examiner"></data-list>
        <!-- <Table border ref="selection" @on-selection-change="tabSelect" :columns="columns4" :data="dataListActive"> -->
            <template slot="operation">
                <Button size="small" style="margin-right: 5px" @click="operationClick">查看考生信息</Button>
            </template>
        </Table>
        <!-- 分页 -->
        <div class="page">
            <!-- <Page :total="dataList.length" :current="currentPage" @on-change="pageChange" show-elevator show-total /> -->
            <page-processing :dataList="dataLists" @pagingProcessing="pagingProcessing"></page-processing>
        </div>
    </div>
</template>

<script>
    import dataList from "../common/dataList"
    import btnSearch from "../common/search"
    import pageProcessing from "../common/pageProcessing"
    export default {
        components: {
            dataList,
            btnSearch,
            pageProcessing
        },
        data() {
            return {
                /* grid: {
                    xl: 8,
                    lg: 8,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                collapse: false,
                data: {
                    code: '',
                    name: '',
                    type: null,
                    startTimeSt: []
                }, */
                columns4:[
                    { // 勾选框
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    }
                ],
                /* 初始页 */
                currentPage: 1,
                /* 总数据 */
                dataLists: [
                    {
                        name: "廖奕炯1",
                        register_time: "2020-3-17",
                        ID_card: "4415221994112902931",
                        phone_number: "132420124451",
                        last_date: "2020-3-18",
                        record_num: "3"
                    },
                    {
                        name: "廖奕炯2",
                        register_time: "2020-3-17",
                        ID_card: "4415221994112902932",
                        phone_number: "132420124452",
                        last_date: "2020-3-18",
                        record_num: "3"
                    },
                    {
                        name: "廖奕炯3",
                        register_time: "2020-3-17",
                        ID_card: "4415221994112902933",
                        phone_number: "132420124453",
                        last_date: "2020-3-18",
                        record_num: "3"
                    },
                    {
                        name: "廖奕炯4",
                        register_time: "2020-3-17",
                        ID_card: "4415221994112902934",
                        phone_number: "132420124454",
                        last_date: "2020-3-18",
                        record_num: "3"
                    },
                    {
                        name: "廖奕炯5",
                        register_time: "2020-3-17",
                        ID_card: "4415221994112902935",
                        phone_number: "132420124455",
                        last_date: "2020-3-18",
                        record_num: "3"
                    },
                    {
                        name: "廖奕炯",
                        register_time: "2020-3-17",
                        ID_card: "441522199411290293",
                        phone_number: "132420124455",
                        last_date: "2020-3-18",
                        record_num: "3"
                    },
                    {
                        name: "廖奕炯",
                        register_time: "2020-3-17",
                        ID_card: "441522199411290293",
                        phone_number: "13242012445",
                        last_date: "2020-3-18",
                        record_num: "3"
                    },
                    {
                        name: "廖奕炯",
                        register_time: "2020-3-17",
                        ID_card: "441522199411290293",
                        phone_number: "13242012445",
                        last_date: "2020-3-18",
                        record_num: "3"
                    },
                    {
                        name: "廖奕炯",
                        register_time: "2020-3-17",
                        ID_card: "441522199411290293",
                        phone_number: "13242012445",
                        last_date: "2020-3-18",
                        record_num: "3"
                    },
                    {
                        name: "廖奕炯",
                        register_time: "2020-3-17",
                        ID_card: "4415221994112902930",
                        phone_number: "13242012445",
                        last_date: "2020-3-18",
                        record_num: "3"
                    },
                    {
                        name: "廖奕炯",
                        register_time: "2020-3-17",
                        ID_card: "4415221994112902931",
                        phone_number: "13242012445",
                        last_date: "2020-3-18",
                        record_num: "3"
                    },
                    {
                        name: "廖奕炯",
                        register_time: "2020-3-17",
                        ID_card: "4415221994112902932",
                        phone_number: "13242012445",
                        last_date: "2020-3-18",
                        record_num: "3"
                    },
                    {
                        name: "廖奕炯",
                        register_time: "2020-3-17",
                        ID_card: "4415221994112902933",
                        phone_number: "13242012445",
                        last_date: "2020-3-18",
                        record_num: "3"
                    },
                    {
                        name: "廖奕炯",
                        register_time: "2020-3-17",
                        ID_card: "4415221994112902934",
                        phone_number: "13242012445",
                        last_date: "2020-3-18",
                        record_num: "3"
                    }
                ],
                /* 当前页面数据 */
                dataListActive: []
            }
        },
        mounted() {
            // this.pagingProcessing()
        },
        methods: {
            // 数据搜索
            btnSearch(dataListActive) {
                this.dataListActive = dataListActive
            },
            /* searchDableData() {
                // console.log(this.$store.state)
                this.dataListActive = this.filterOne(this.dataList, this.searchValue, ["id"])
            }, */
            /* 清空 */
            emptyData() {

            },
            /* 翻页触发事件 */
            /* pageChange(page) {
                this.currentPage = page
                this.pagingProcessing()
            }, */
            /* 分页处理 */
            pagingProcessing(dataListActive) {
                // this.dataListActive = this.dataList.slice((this.currentPage-1 )* 10, 10 * this.currentPage)
                this.dataListActive = dataListActive
            },
            operationClick() {
                this.$router.push({name: "examineeInfo"})
            }
        }
    }
</script>

<style lang="less">
// 考务人员页面头部
.examination_personnel-header {
    width: 100%;
    background-color: white;
    margin-top: 20px;
    padding: 10px;
    box-sizing: border-box;
    .header-ipt {
        outline:medium;
        &.header-ipt::-webkit-input-placeholder {
            color: #ccc;
        }
    }
    .header-btn {
        margin-left: 15px;
    }
}
.page {
    // margin-top: 20px;
}
</style>